<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/jspf/taglibs.jspf" %>
<%@ page trimDirectiveWhitespaces="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>账号管理</title>
    <link rel="stylesheet" type="text/css" href="/styles/campaign.css">
    <script type="text/javascript">
        localPath = "profile"
    </script>
</head>
<body>
<div class="p-h-md p-v bg-white box-shadow pos-rlt">
    <h3 class="no-margin have-btn-title">账号管理</h3>
</div>
<div class="box">
    <div class="col-md-10 b-l bg-auto" id='user-info-container'>
        <div class="users-news col-md-12" id="user-info-content">
            <p class="profile-title col-md-12">账户信息修改</p>
            <form:form modelAttribute="form" class="p-md" method="post" enctype="multipart/form-data" action="/profile"
                       id="acManage">
                <div class="col-md-3 left-img">
                    <div class="">
                        <a href class="w-xs inline" id="backgroundPicPathLogo-a">
                            <img src="${member.avatarPath} " id="backgroundPicPathLogo">
                        </a>
                        <div class="upload-img">
                            <input type="file" id="backgroundPicLogo"/>
                                <%--<button id="upload-button" class="btn btn-sm btn-success ng-click-active">上传图片</button>--%>
                            <form:hidden path="avatarId" id="avatarId" value="${member.avatarId}"/>
                            <form:hidden path="picPath" id="picPath" value="${member.avatarPath}"/>
                        </div>
                    </div>
                </div>
                <input id="memberId" type="hidden" value="${member.id}"/>
                <div class="col-md-3 user-news">
                    <div class="form-group">
                        <label>用户名：</label>
                        <form:input id="username" path="username" disabled="true"
                                    cssClass="form-control w-xxl w-full-xs" placeholder="用户名"
                                    value="${member.username }"/>
                    </div>
                    <div class="form-group">
                        <label><span style="color:red"></span>公司名称：</label>
                        <form:input id="companyName" disabled="true" path="companyName"
                                    cssClass="form-control w-xxl w-full-xs" placeholder="公司名称"
                                    value="${member.companyName }"/>
                    </div>
                    <div class="form-group">
                        <label><span style="color:red">*</span>邮件地址：</label>
                        <form:input id="email" path="email" cssClass="form-control w-xxl w-full-xs" placeholder="email"
                                    value="${member.email }"/>
                    </div>
                </div>
                <div class="col-md-3 user-news">
                    <div class="form-group">
                        <label>公司地址：</label>
                        <form:input id="address" path="address" cssClass="form-control w-xxl w-full-xs"
                                    placeholder="公司地址" value="${member.address }"/>
                    </div>
                    <div class="form-group">
                        <label>固话：</label>
                        <form:input id="phone" path="phone" cssClass="form-control w-xxl w-full-xs" placeholder="固定电话"
                                    value="${member.phone }"/>
                    </div>
                    <div class="form-group">
                        <label>手机：</label>
                        <form:input id="mobile" path="mobile" cssClass="form-control w-xxl w-full-xs" placeholder="手机"
                                    value="${member.mobile }"/>
                    </div>
                </div>
                <div class="col-md-3 user-update-btn">
                    <button id="user-submit-btn" type="submit" class="btn  btn-primary ng-click-active">提交</button>
                </div>
            </form:form>
        </div>


        <div class="users-news col-md-12" id="user-info-code">
            <p class="profile-title col-md-12">绑定信息</p>
            <div class="col-md-3 left-img">
                <div class="code-img" id="login_container">

                </div>
                <p class="code-description">扫描二维码进行绑定微信号</p>
            </div>

            <div class="col-md-6">
                <div class="bind-list">
                    <div class="col-md-3 left-title">
                        <p>已绑定账号</p>
                    </div>
                    <div class="col-md-9 bind-list-menu">
                        <ul>
                            <c:forEach items="${form.wechatUsers}" var="wechatUser">
                            <li>
                                <p class="pull-left" id="${wechatUser.id}">${wechatUser.nickname}</p>
                                <button class="btn btn-primary pull-right removeBinding">解除绑定</button>
                            </li>
                            </c:forEach>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="/js/bootstrap.js"></script>
<script type="text/javascript" src="/js/jquery.validate.js"></script>
<script type="text/javascript" src="/js/messages_zh.js"></script>
<script type="text/javascript" src="/js/jquery-validate.bootstrap-tooltip.js"></script>
<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var isBinding = <%=request.getSession().getAttribute("isBinding")%>
        var account = <%=request.getSession().getAttribute("account")%>
        if(isBinding!=""&&parseInt(isBinding)==2){
            showMessage("该微信号已绑定其他账号!",0);
        }else if(isBinding!=""&&parseInt(isBinding)==1){
            showMessage("该微信账号绑定成功!",0);
        }
        if(account!=""&&parseInt(account)>4){
            showMessage("该账号最多绑定5个不同的微信号!",0);
        }
        <%request.getSession().removeAttribute("isBinding");%>
        <%request.getSession().removeAttribute("account");%>
        //验证码
        var appid = "<%=request.getAttribute("appid")%>";
        var redirectUrl = "<%=request.getAttribute("redirectUrl")%>";
        var memberId = $("#memberId").val();
        var timestamp = Date.parse(new Date());
        var obj = new WxLogin({
            id: "login_container",
            appid: appid,
            scope: "snsapi_login",
            redirect_uri: redirectUrl+"/wxlogin",
            state: "2-" + memberId + "-" + timestamp,
            style: "",
            href: "https://pm.hailiangtong.com/vs/wechat_bind.css"
        });

        // 手机号码验证
        jQuery.validator.addMethod("isMobile", function (value, element) {
            var length = value.length;
            var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
            return this.optional(element) || (length == 11 && mobile.test(value));
        }, "请正确填写您的手机号码");
        //固定号码验证
        jQuery.validator.addMethod("isPhone", function (value, element) {
            var length = value.length;
            var phone = /^0\d{2,3}-?\d{7,9}$/;
            return this.optional(element) || phone.test(value);
        }, "请正确填写正确的固话号码");

        $("#acManage").validate({
            rules: {
                mobile: {isMobile: true, minlength: 11},
                phone: {isPhone: true, rangelength: [10, 12]},
                //email唯一验证
                email: {
                    required: true, email: true,
                    remote: {
                        url: "/check_email",     //后台处理程序
                        type: "get",               //数据发送方式
                        dataType: "html",           //接受数据格式
                        data: {                     //要传递的数据
                            email: function () {
                                return $("#email").val();
                            }
                        },
                        dataFilter: function (data, type) {
                            if (data == "true") {
                                return false;
                            }
                            else
                                return true;
                        }
                    },
                },
                loginIp: {url: true},
                companyName: {required: true, rangelength: [2, 22]},
                address: {minlength: 2}
            },
            messages: {
                mobile: {isMobile: "请正确输入您的手机号码", minlength: "请输入不少于11位的手机号码"},
                phone: {isPhone: "请正确输入固话号码", minlength: "请输入10~12位的固话号码-含区号"},
                email: {rquired: "请输入email", email: "请正确输入email", remote: "emil已存在"},
                loginIp: {url: "请输入正确的网址"},
                companyName: {required: "必填", rangelength: "至少输入2位"},
                address: {minlength: "请输入不能少于2位详细地址"}
            }
        });

        $(".removeBinding").on("click",function(){
            bootbox.dialog({
                title: "微信解绑提示",
                message: "<div>是否真的要解除绑定？</div><p>解除绑定后，该微信账号将无法扫码登录账号。</p>",
                buttons: {
                    "success": {
                        "label": "<i class='icon-ok'></i> 确定",
                        "className": "btn-sm btn-primary",
                        "callback": function () {
                            var wechatId = $(this).prev("p").attr("id");
                            $.ajax({
                                url: "/profile/remove/binding",
                                type: "POST",
                                dataType: "json",
                                data: {
                                    wechatId:wechatId
                                },
                                success:function(data){
                                    showMessage("微信绑定解除成功!",1);
                                }
                            })
                        }
                    },
                    "cancel": {
                        "label": "<i class='icon-info'></i> 取消",
                        "className": "btn-sm btn-default",
                        "callback": function () {
                        }
                    }
                }
            });
        });
        function showMessage(str,type){
            bootbox.dialog({
                title: "微信绑定提示",
                message:str+"",
                buttons: {
                    "success": {
                        "label": "<i class='icon-ok'></i> 确定",
                        "className": "btn-sm btn-primary",
                        "callback": function () {
                            if(type==1){
                                window.location.href="/profile";
                            }
                        }
                    }
                }
            })
        }
    });
</script>
<script src="/js/plugins/uploader/jquery.uploadify.js"></script>
<script src="/js/plugins/uploader/image_manage.js"></script>
</body>
</html>